﻿/* -----------------------------------------------------------------------
 ico_btn 2.2
 http://

   * Copyright (c) 2011-Present. 
   * Author: Paul Gualambo Giraldo
   * Date: 21/07/2011
----------------------------------------------------------------------- */
/***
	ico-btn.css
	Formatos

	Ejemplos:

	++++++++++++++++++++++++++++++++++++++++++++++++++++++
	+Como deben de ir en las clases de div
	+
	+iconos
	+ico20 StyleRojoIco20 ico20-editar pointer float-left
	+
	+botones
	+btn20 StyleRojoBtn20 btn20-visto-bueno pointer float-left
	+btn20-texto
	++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/

/**
	Style Rojo Boton e icono
*/
div.StyleRojoBtn30
{
	background: url(images/btn30StyleRojo.png);
}
	
div.StyleRojoBtn30:hover, div.StyleRojoBtn30-on
{
	color: #B6030D;
}

div.StyleRojoBtn30-off, div.StyleRojoBtn30-off:hover
{
	color: #000;
}

/**
	Style Rojo Boton e icono
*/
div.StyleRojoBtn20
{
	background: url(images/btn20StyleRojo.png);
}
	
div.StyleRojoBtn20:hover, div.StyleRojoBtn20-on
{
	color: #B6030D;
}

div.StyleRojoBtn20-off, div.StyleRojoBtn20-off:hover
{
	color: #000;
}

/**
	Con el icono cada cuadrado 60X120
*/
div.StyleRojoIco30
{
	background: url(images/ico30StyleRojo.png);
}

div.StyleRojoIco20
{
	background: url(images/ico20StyleRojo.png);
}

/****
	Botones e iconos
*/
div.btn30
{	
	height: 30px;
	width: 110px;
	overflow: hidden;
	line-height: 2.4;
}

div.btn30-texto
{
	margin-left: 40px;
	font-size: 12px;
	height: 30px;
}

div.btn20
{	
	height: 20px;
	width: 74px;
	overflow: hidden;
	line-height: 1.6;
}

div.btn20-texto
{
	margin-left: 25px;
	font-size: 11px;
	height: 20px;
}

div.ico30
{	
	height: 30px;
	width: 30px;
}

div.ico20
{	
	height: 20px;
	width: 20px;
}
/*********************************************************************************
	Botones tamaño 30 anche de 120
*/
/**
Nuevo 
*/
div.btn30-nuevo, div.btn30-nuevo-off
{
	background-position: -0px -0px;
}

div.btn30-nuevo:hover, div.btn30-nuevo-on
{
	background-position: -0px -30px;
}

/**
Editar
*/
div.btn30-editar, div.btn30-editar-off
{
	background-position: -120px -0px;
}

div.btn30-editar:hover, div.btn30-editar-on
{
	background-position: -120px -30px;
}

/**
Imprimir
*/
div.btn30-imprimir, div.btn30-imprimir-off
{
	background-position: -240px -0px;
}

div.btn30-imprimir:hover, div.btn30-imprimir-on
{
	background-position: -240px -30px;
}

/**
Eliminar
*/
div.btn30-eliminar, div.btn30-eliminar-off
{
	background-position: -360px -0px;
}

div.btn30-eliminar:hover, div.btn30-eliminar-on
{
	background-position: -360px -30px;
}

/**
Detalles
*/
div.btn30-detalles, div.btn30-detalles-off
{
	background-position: -480px -0px;
}

div.btn30-detalles:hover, div.btn30-detalles-on
{
	background-position: -480px -30px;
}

/**
Visto Bueno
*/
div.btn30-visto-bueno, div.btn30-visto-bueno-off
{
	background-position: -600px -0px;
}

div.btn30-visto-bueno:hover, div.btn30-visto-bueno-on
{
	background-position: -600px -30px;
}

/**
Guion
*/
div.btn30-guion, div.btn30-guion-off
{
	background-position: -720px -0px;
}

div.btn30-guion:hover, div.btn30-guion-on
{
	background-position: -720px -30px;
}

/**
Agregar nuevo
*/
div.btn30-agregar-nuevo, div.btn30-agregar-nuevo-off
{
	background-position: -840px -0px;
}

div.btn30-agregar-nuevo:hover, div.btn30-agregar-nuevo-on
{
	background-position: -840px -30px;
}

/**
Excel
*/
div.btn30-excel, div.btn30-excel-off
{
	background-position: -960px -0px;
}

div.btn30-excel:hover, div.btn30-excel-on
{
	background-position: -960px -30px;
}

/**
Mensaje
*/
div.btn30-mensaje, div.btn30-mensaje-off
{
	background-position: -1080px -0px;
}

div.btn30-mensaje:hover, div.btn30-mensaje-on
{
	background-position: -1080px -30px;
}

/**
Izquierda
*/
div.btn30-izquierda, div.btn30-izquierda-off
{
	background-position: -1200px -0px;
}

div.btn30-izquierda:hover, div.btn30-izquierda-on
{
	background-position: -1200px -30px;
}

/**
Derecha
*/
div.btn30-derecha, div.btn30-derecha-off
{
	background-position: -1320px -0px;
}

div.btn30-derecha:hover, div.btn30-derecha-on
{
	background-position: -1320px -30px;
}

/**
Lupa
*/
div.btn30-lupa, div.btn30-lupa-off
{
	background-position: -1440px -0px;
}

div.btn30-lupa:hover, div.btn30-lupa-on
{
	background-position: -1440px -30px;
}

/**
Flecha curva atras
*/
div.btn30-flecha-curva-atras, div.btn30-flecha-curva-atras-off
{
	background-position: -1560px -0px;
}

div.btn30-flecha-curva-atras:hover, div.btn30-flecha-curva-atras-on
{
	background-position: -1560px -30px;
}

/**
Flecha curva adelante
*/
div.btn30-flecha-curva-adelante, div.btn30-flecha-curva-adelante-off
{
	background-position: -1680px -0px;
}

div.btn30-flecha-curva-adelante:hover, div.btn30-flecha-curva-adelante-on
{
	background-position: -1680px -30px;
}

/**
Papelera
*/
div.btn30-papelera, div.btn30-papelera-off
{
	background-position: -1800px -0px;
}

div.btn30-papelera:hover, div.btn30-papelera-on
{
	background-position: -1800px -30px;
}


/*********************************************************************************
	Botones tamaño 20 ancho de 80
*/
/**
Nuevo 
*/
div.btn20-nuevo, div.btn20-nuevo-off
{
	background-position: -0px -0px;
}

div.btn20-nuevo:hover, div.btn20-nuevo-on
{
	background-position: -0px -20px;
}

/**
Editar
*/
div.btn20-editar, div.btn20-editar-off
{
	background-position: -80px -0px;
}

div.btn20-editar:hover, div.btn20-editar-on
{
	background-position: -80px -20px;
}

/**
Imprimir
*/
div.btn20-imprimir, div.btn20-imprimir-off
{
	background-position: -160px -0px;
}

div.btn20-imprimir:hover, div.btn20-imprimir-on
{
	background-position: -160px -20px;
}

/**
Eliminar
*/
div.btn20-eliminar, div.btn20-eliminar-off
{
	background-position: -240px -0px;
}

div.btn20-eliminar:hover, div.btn20-eliminar-on
{
	background-position: -240px -20px;
}

/**
Detalles
*/
div.btn20-detalles, div.btn20-detalles-off
{
	background-position: -320px -0px;
}

div.btn20-detalles:hover, div.btn20-detalles-on
{
	background-position: -320px -20px;
}

/**
Visto Bueno
*/
div.btn20-visto-bueno, div.btn20-visto-bueno-off
{
	background-position: -400px -0px;
}

div.btn20-visto-bueno:hover, div.btn20-visto-bueno-on
{
	background-position: -400px -20px;
}

/**
Guion
*/
div.btn20-guion, div.btn20-guion-off
{
	background-position: -480px -0px;
}

div.btn20-guion:hover, div.btn20-guion-on
{
	background-position: -480px -20px;
}

/**
Agregar Nuevo
*/
div.btn20-agregar-nuevo, div.btn20-agregar-nuevo-off
{
	background-position: -560px -0px;
}

div.btn20-agregar-nuevo:hover, div.btn20-agregar-nuevo-on
{
	background-position: -560px -20px;
}

/**
Excel
*/
div.btn20-excel, div.btn20-excel-off
{
	background-position: -640px -0px;
}

div.btn20-excel:hover, div.btn20-excel-on
{
	background-position: -640px -20px;
}

/**
Mensaje
*/
div.btn20-mensaje, div.btn20-mensaje-off
{
	background-position: -720px -0px;
}

div.btn20-mensaje:hover, div.btn20-mensaje-on
{
	background-position: -720px -20px;
}

/**
Izquierda
*/
div.btn20-izquierda, div.btn20-izquierda-off
{
	background-position: -800px -0px;
}

div.btn20-izquierda:hover, div.btn20-izquierda-on
{
	background-position: -800px -20px;
}

/**
Derecha
*/
div.btn20-derecha, div.btn20-derecha-off
{
	background-position: -880px -0px;
}

div.btn20-derecha:hover, div.btn20-derecha-on
{
	background-position: -880px -20px;
}

/**
Lupa
*/
div.btn20-lupa, div.btn20-lupa-off
{
	background-position: -960px -0px;
}

div.btn20-lupa:hover, div.btn20-lupa-on
{
	background-position: -960px -20px;
}

/**
Flecha curva atras
*/
div.btn20-flecha-curva-atras, div.btn20-flecha-curva-atras-off
{
	background-position: -1040px -0px;
}

div.btn20-flecha-curva-atras:hover, div.btn20-flecha-curva-atras-on
{
	background-position: -1040px -20px;
}

/**
Flecha curva adelante
*/
div.btn20-flecha-curva-adelante, div.btn20-flecha-curva-adelante-off
{
	background-position: -1120px -0px;
}

div.btn20-flecha-curva-adelante:hover, div.btn20-flecha-curva-adelante-on
{
	background-position: -1120px -20px;
}

/**
Papelera
*/
div.btn20-papelera, div.btn20-papelera-off
{
	background-position: -1200px -0px;
}

div.btn20-papelera:hover, div.btn20-papelera-on
{
	background-position: -1200px -20px;
}



/*********************************************************************************
Iconos 20
*****/
/**
Nuevo
*/
div.ico20-nuevo, div.ico20-nuevo-off
{
	background-position: -0px -0px;
}

div.ico20-nuevo:hover, div.ico20-nuevo-on
{
	background-position: -0px -20px;
}

/**
Editar
*/
div.ico20-editar, div.ico20-editar-off
{
	background-position: -40px -0px;
}

div.ico20-editar:hover, div.ico20-editar-on
{
	background-position: -40px -20px;
}

/**
Imprimir
*/
div.ico20-imprimir, div.ico20-imprimir-off
{
	background-position: -80px -0px;
}

div.ico20-imprimir:hover, div.ico20-imprimir-on
{
	background-position: -80px -20px;
}

/**
Eliminar
*/
div.ico20-eliminar, div.ico20-eliminar-off
{
	background-position: -120px -0px;
}

div.ico20-eliminar:hover, div.ico20-eliminar-on
{
	background-position: -120px -20px;
}

/**
Detalles
*/
div.ico20-detalles, div.ico20-detalles-off
{
	background-position: -160px -0px;
}

div.ico20-detalles:hover, div.ico20-detalles-on
{
	background-position: -160px -20px;
}

/**
Visto Bueno
*/
div.ico20-visto-bueno, div.ico20-visto-bueno-off
{
	background-position: -200px -0px;
}

div.ico20-visto-bueno:hover, div.ico20-visto-bueno-on
{
	background-position: -200px -20px;
}

/**
Guion
*/
div.ico20-guion, div.ico20-guion-off
{
	background-position: -240px -0px;
}

div.ico20-guion:hover, div.ico20-guion-on
{
	background-position: -240px -20px;
}

/**
Agregar
*/
div.ico20-agregar-nuevo, div.ico20-agregar-nuevo-off
{
	background-position: -280px -0px;
}

div.ico20-agregar-nuevo:hover, div.ico20-agregar-nuevo-on
{
	background-position: -280px -20px;
}

/**
Excel
*/
div.ico20-excel, div.ico20-excel-off
{
	background-position: -320px -0px;
}

div.ico20-excel:hover, div.ico20-excel-on
{
	background-position: -320px -20px;
}

/**
Mensaje
*/
div.ico20-mensaje, div.ico20-mensaje-off
{
	background-position: -360px -0px;
}

div.ico20-mensaje:hover, div.ico20-mensaje-on
{
	background-position: -360px -20px;
}

/**
Izquierda
*/
div.ico20-izquierda, div.ico20-izquierda-off
{
	background-position: -400px -0px;
}

div.ico20-izquierda:hover, div.ico20-izquierda-on
{
	background-position: -400px -20px;
}

/**
Derecha
*/
div.ico20-derecha, div.ico20-derecha-off
{
	background-position: -440px -0px;
}

div.ico20-derecha:hover, div.ico20-derecha-on
{
	background-position: -440px -20px;
}

/**
Lupa
*/
div.ico20-lupa, div.ico20-lupa-off
{
	background-position: -480px -0px;
}

div.ico20-lupa:hover, div.ico20-lupa-on
{
	background-position: -480px -20px;
}

/**
Flecha Curva atras
*/
div.ico20-flecha-curva-atras, div.ico20-flecha-curva-atras-off
{
	background-position: -520px -0px;
}

div.ico20-flecha-curva-atras:hover, div.ico20-flecha-curva-atras-on
{
	background-position: -520px -20px;
}

/**
Flecha Curva adelante
*/
div.ico20-flecha-curva-adelante, div.ico20-flecha-curva-adelante-off
{
	background-position: -560px -0px;
}

div.ico20-flecha-curva-adelante:hover, div.ico20-flecha-curva-adelante-on
{
	background-position: -560px -20px;
}

/**
Papelera
*/
div.ico20-papelera, div.ico20-papelera-off
{
	background-position: -600px -0px;
}

div.ico20-papelera:hover, div.ico20-papelera-on
{
	background-position: -600px -20px;
}

/*********************************************************************************
Iconos 30
*****/
/**
Nuevo
*/
div.ico30-nuevo, div.ico30-nuevo-off
{
	background-position: -0px -0px;
}

div.ico30-nuevo:hover, div.ico30-nuevo-on
{
	background-position: -0px -30px;
}

/**
Editar
*/
div.ico30-editar, div.ico30-editar-off
{
	background-position: -60px -0px;
}

div.ico30-editar:hover, div.ico30-editar-on
{
	background-position: -60px -30px;
}

/**
Imprimir
*/
div.ico30-imprimir, div.ico30-imprimir-off
{
	background-position: -120px -0px;
}

div.ico30-imprimir:hover, div.ico30-imprimir-on
{
	background-position: -120px -30px;
}

/**
Eliminar
*/
div.ico30-eliminar, div.ico30-eliminar-off
{
	background-position: -180px -0px;
}

div.ico30-eliminar:hover, div.ico30-eliminar-on
{
	background-position: -180px -30px;
}

/**
Detalles
*/
div.ico30-detalles, div.ico30-detalles-off
{
	background-position: -240px -0px;
}

div.ico30-detalles:hover, div.ico30-detalles-on
{
	background-position: -240px -30px;
}

/**
Visto Bueno
*/
div.ico30-visto-bueno, div.ico30-visto-bueno-off
{
	background-position: -300px -0px;
}

div.ico30-visto-bueno:hover, div.ico30-visto-bueno-on
{
	background-position: -300px -30px;
}

/**
Guion
*/
div.ico30-guion, div.ico30-guion-off
{
	background-position: -360px -0px;
}

div.ico30-guion:hover, div.ico30-guion-on
{
	background-position: -360px -30px;
}

/**
Agregar
*/
div.ico30-agregar-nuevo, div.ico30-agregar-nuevo-off
{
	background-position: -420px -0px;
}

div.ico30-agregar-nuevo:hover, div.ico30-agregar-nuevo-on
{
	background-position: -420px -30px;
}

/**
Excel
*/
div.ico30-excel, div.ico30-excel-off
{
	background-position: -480px -0px;
}

div.ico30-excel:hover, div.ico30-excel-on
{
	background-position: -480px -30px;
}

/**
Mensaje
*/
div.ico30-mensaje, div.ico30-mensaje-off
{
	background-position: -540px -0px;
}

div.ico30-mensaje:hover, div.ico30-mensaje-on
{
	background-position: -540px -30px;
}

/**
Izquierda
*/
div.ico30-izquierda, div.ico30-izquierda-off
{
	background-position: -600px -0px;
}

div.ico30-izquierda:hover, div.ico30-izquierda-on
{
	background-position: -600px -30px;
}

/**
Derecha
*/
div.ico30-derecha, div.ico30-derecha-off
{
	background-position: -660px -0px;
}

div.ico30-derecha:hover, div.ico30-derecha-on
{
	background-position: -660px -30px;
}

/**
Lupa
*/
div.ico30-lupa, div.ico30-lupa-off
{
	background-position: -720px -0px;
}

div.ico30-lupa:hover, div.ico30-lupa-on
{
	background-position: -720px -30px;
}

/**
Flecha Curva atras
*/
div.ico30-flecha-curva-atras, div.ico30-flecha-curva-atras-off
{
	background-position: -780px -0px;
}

div.ico30-flecha-curva-atras:hover, div.ico30-flecha-curva-atras-on
{
	background-position: -780px -20px;
}

/**
Flecha Curva adelante
*/
div.ico30-flecha-curva-adelante, div.ico30-flecha-curva-adelante-off
{
	background-position: -840px -0px;
}

div.ico30-flecha-curva-adelante:hover, div.ico30-flecha-curva-adelante-on
{
	background-position: -840px -20px;
}

/**
Papelera
*/
div.ico30-papelera, div.ico30-papelera-off
{
	background-position: -900px -0px;
}

div.ico30-papelera:hover, div.ico30-papelera-on
{
	background-position: -900px -20px;
}

/*********************************************************************************
Rayo 
*/
div.ico20-rayo, div.ico20-rayo-off
{
	width:20px;
	height:20px;
	background:url(images/rayo-negro20.png);
}

div.ico20-rayo:hover, div.ico20-rayo-on
{
	width:20px;
	height:20px;	
	background:url(images/rayo-amarillo20.png);
}

div.ico30-rayo, div.ico30-rayo-off
{
	width:30px;
	height:30px;
	background:url(images/rayo-negro30.png);
}

div.ico30-rayo:hover, div.ico30-rayo-on
{
	width:30px;
	height:30px;	
	background:url(images/rayo-amarillo30.png);
}